<template>
  <div class="pageBox">
    <head-component title="商品详情" :borderStatus="false"></head-component>
    <div class="swipeBox">
      <van-swipe @change="onChange">
        <van-swipe-item v-if="details.video">
          <video class="videoObj" :src="details.video" controls></video>
        </van-swipe-item>
        <van-swipe-item v-for="(item, index) in swipeData" :key="index">
          <img class="banner" :src="item" alt="" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            {{ active + 1 }}/{{
              details.video ? swipeData.length + 1 : swipeData.length
            }}
          </div>
        </template>
      </van-swipe>
    </div>

    <div class="priceBox">
      <div class="price flex-row">
        <p>￥{{ nowPrice }}</p>
        <del>￥{{ oldPrice }}</del>
        <span v-if="details.genre == 2"
          >赠送{{ details.pcate ? details.pcate.sendScore : "" }}倍积分</span
        >
      </div>
      <div class="title">{{ details.title }}</div>
    </div>

    <div class="line"></div>

    <div class="detailsBox">
      <div class="detailsTitle">商品详情</div>
      <div class="con" ref="con" v-html="details.content"></div>
    </div>

    <img
      class="fanhuidingbu_btn"
      src="@/image/home/fanhuidingbu_btn.png"
      alt=""
      @click="onBackTop"
    />

    <div class="bottom flex-between">
      <div class="bottomLeft flex">
        <div class="leftItem flex-center" @click="goCart">
          <img src="@/image/home/gouwuche.png" alt="" />
          <p>购物车</p>
        </div>
        <div class="leftItem flex-center" @click="onShare">
          <img src="@/image/home/shareIcon.png" alt="" />
          <p>分享</p>
        </div>
      </div>
      <div class="rightItem flex-row">
        <button class="addCart" @click="onAddCart">加入购物车</button>
        <button class="buy" @click="onBuy">
          {{ details.genre == 0 ? "立即兑换" : "立即购买" }}
        </button>
      </div>
    </div>

    <van-popup v-model:show="show" position="bottom" round>
      <div class="popupBox">
        <div class="popupTop flex-row">
          <img class="popupTopImg" :src="goodsImg" alt="" />
          <div class="popupRight">
            <p>￥{{ nowPrice }}</p>
            <span>{{ details.title }}</span>
          </div>
        </div>

        <div class="skuBox" v-if="hasoption == 1">
          <div class="sku" v-for="item in skuList" :key="item.id">
            <div class="skuTitle">{{ item.title }}</div>
            <div class="skuCon flex-between">
              <button
                :class="[item2.status ? 'skuItem skuActive' : 'skuItem']"
                v-for="item2 in item.itemList"
                :key="item2.id"
                @click="onSkuItem(item, item2)"
              >
                {{ item2.title }}
              </button>
            </div>
          </div>
        </div>

        <div class="stepBox flex-between">
          <p>{{ details.genre == 0 ? "兑换数量" : "购买数量" }}</p>
          <van-stepper v-model="stepValue" />
        </div>

        <div class="popupBtnBox flex-between">
          <button class="popupAddCart" @click="onPopupAddCart">
            加入购物车
          </button>
          <button class="popupBuy" @click="onPopupBuy">
            {{ details.genre == 0 ? "立即兑换" : "立即购买" }}
          </button>
        </div>
      </div>
    </van-popup>

    <van-overlay :show="shareShow" @click="shareShow = false" z-index="11">
      <div class="wrapper">
        <div class="share">
          <div class="shareMain" ref="shareMain">
            <img class="shareMainImg" :src="shareImg" alt="" />
            <div class="bom flex-between">
              <div class="bomLeft">
                <qrcode-vue :value="value" :size="size" :margin="2" level="H" />
              </div>
              <div class="bomRight flex-center">
                <img :src="avatarImg" alt="" />
                <p>{{ info.nickname }}</p>
                <span>{{ info.mobile }}</span>
              </div>
            </div>
          </div>
          <button class="shareBtn" @click.stop="onShareBtn">保存卡片</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, nextTick, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";
import QrcodeVue from "qrcode.vue";
import { saveDomImage } from "../../untils/saveImg";

export default defineComponent({
  components: {
    headComponent,
    QrcodeVue,
  },
  setup() {
    const con = ref(null);
    const id = ref(
      router.currentRoute.value.query.id
        ? router.currentRoute.value.query.id
        : ""
    );
    const active = ref(0);
    const swipeData = ref([]);
    const show = ref(false);

    const skuList = ref([]);

    const isChecked = ref(false); // 是否选中规格

    const details = ref({}); // 详情
    const hasoption = ref(0); // 是否启用规格1：启用 0：不启用

    const oldPrice = ref(0); // 原价
    const nowPrice = ref(0); // 现价
    const goodsImg = ref(""); // 商品图片

    const joint = ref([]); // 规格拼接
    const specsList = ref([]); // 选择的规格列表
    const jointId = ref(""); // 规格拼接id

    const goodsId = ref(""); // 商品id
    const stepValue = ref(1); // 步进器 购买数量
    const specsId = ref(""); // 规格拼接的id

    const shareMain = ref(null);
    const shareShow = ref(false); // 分享弹窗
    const value = ref("");
    const size = ref(121);
    const info = ref({});
    const shareImg = ref(null);
     const avatarImg = ref(null);

    // 轮播变换
    function onChange(index) {
      active.value = index;
    }

    // 回到顶部
    function onBackTop() {
      document.documentElement.scrollTop = 0;
    }

    // 点击页面底部加入购物车
    function onAddCart() {
      show.value = true;
    }

    // 点击页面底部立即购买
    function onBuy() {
      show.value = true;
    }

    function onSkuItem(param, param2) {
      console.log(param, param2);
      skuList.value.forEach((item, index) => {
        if (item.id == param.id) {
          item.status = true;
          console.log("规格标题：", item.title);
          item.itemList.forEach((item2) => {
            item2.status = false;
            if (item2.id == param2.id) {
              console.log("规格：", item2.title);
              item2.status = true;
              joint.value[index] = item2.id;
              specsList.value[index] = {
                specsTitle: item.title,
                id: item2.id,
                title: item2.title,
              };
            }
          });
        }
      });
      if (joint.value.length == skuList.value.length) {
        console.log("选择的规格id", joint.value);
        jointId.value = joint.value.join("_");
        console.log("选择的规格id拼接:", jointId.value);
        getSpecsId(jointId.value);
      }
    }

    // 拼接规格的id 价格 图片
    function getSpecsId(jointId) {
      details.value.optionList.forEach((item) => {
        if (item.specs == jointId) {
          specsId.value = item.specs;
          oldPrice.value = item.productprice;
          nowPrice.value = item.marketprice;
          goodsImg.value = item.thumb ? item.thumb : details.value.thumbUrl;
        }
      });
    }

    //弹窗加入购物车
    function onPopupAddCart() {
      onSkuStatus(1);
    }

    //弹窗立即购买
    function onPopupBuy() {
      onSkuStatus(2);
    }

    //  是否选择规格
    function onSkuStatus(type) {
      //type:1 加入购物车  type:2 立即购买
      if (hasoption.value == 1) {
        for (let i = 0; i < skuList.value.length; i++) {
          isChecked.value = false;
          for (let j = 0; j < skuList.value[i].itemList.length; j++) {
            if (skuList.value[i].itemList[j].status) {
              isChecked.value = true;
              break;
            }
          }
          if (!isChecked.value) {
            Toast("请选择" + skuList.value[i].title);
            break;
          }
        }
      } else {
        isChecked.value = true;
      }

      if (isChecked.value) {
        if (type == 1) {
          addCart();
        } else {
          buyNow();
        }
      }
    }

    //加入购物车
    function addCart() {
      post("/portal/Shop", {
        module: "Cart",
        interface: "1000",
        data: {
          goodsId: goodsId.value,
          num: stepValue.value,
          specs: hasoption.value == 1 ? specsId.value : "0",
        },
      }).then(() => {
        Toast("加入购物车成功");
      });
    }

    // 立即购买
    function buyNow() {
      router.push({
        path: "/submitOrders",
        query: {
          goodsId: goodsId.value,
          num: stepValue.value,
          specsId: hasoption.value == 1 ? specsId.value : 0,
          specsList: JSON.stringify(specsList.value),
        },
      });
    }

    function goCart() {
      router.push({
        path: "/cart",
      });
    }

    // 获取详情
    function getDetails() {
      post("/portal/Shop", {
        module: "Goods",
        interface: "2001",
        data: {
          id: id.value,
          lat: "0",
          lng: "0",
        },
      }).then((res) => {
        console.log("商品详情：", res);
        details.value = res.data;
        shareImg.value = "data:image/png;base64," + res.data.shareImage;
        value.value =
          process.env.VUE_APP_URL +
          "/h5/#/goodsDetails2?inviteCode=" +
          res.data.inviteCode +
          "&id=" +
          res.data.id;
        swipeData.value = res.data.thumb;
        hasoption.value = res.data.hasoption;
        oldPrice.value = res.data.productprice;
        nowPrice.value = res.data.marketprice;
        goodsImg.value = res.data.thumbUrl;
        goodsId.value = res.data.id;
        if (hasoption.value == 1) {
          let sku = res.data.specList;
          sku.forEach((item, index) => {
            item.status = false;
            item.id = index;
            item.itemList.forEach((item2) => {
              item2.status = false;
            });
          });
          skuList.value = sku;
          console.log("skuList.value:", skuList.value);
        } else {
          skuList.value = [];
        }
        nextTick(() => {
          addControls();
        });
      });
    }
    getDetails();

    function addControls() {
      let videos = con.value.getElementsByTagName("video");
      for (let i = 0; i < videos.length; i++) {
        videos[i].controls = true;
      }
    }

    function onShare() {
      shareShow.value = true;
    }

    function onShareBtn() {
      saveDomImage(shareMain.value);
    }

    function getInfo() {
      post("/portal", {
        loading: true,
        module: "User",
        interface: "1000",
      }).then((res) => {
        info.value = res.data;
        avatarImg.value = "data:image/png;base64," + res.data.avatarBase
        console.log(info.value);
      });
    }
    getInfo();

    return {
      con,
      id,
      active,
      swipeData,
      show,
      skuList,
      stepValue,
      details,
      isChecked,
      hasoption,
      oldPrice,
      nowPrice,
      goodsImg,
      info,
      joint,
      jointId,
      goodsId,
      specsId,
      specsList,
      shareShow,
      value,
      size,
      shareMain,
      shareImg,
      avatarImg,
      onChange,
      onBackTop,
      onAddCart,
      onBuy,
      onSkuItem,
      onPopupAddCart,
      onPopupBuy,
      onSkuStatus,
      getDetails,
      getSpecsId,
      addCart,
      goCart,
      buyNow,
      onShare,
      onShareBtn,
      getInfo,
      addControls,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  padding-bottom: 110px;
  .swipeBox {
    width: 100%;
    height: 750px;
    :deep(.van-swipe) {
      width: 100%;
      height: 750px;
    }
    :deep(.van-swipe-item) {
      width: 100%;
      height: 750px;
    }
    .custom-indicator {
      position: absolute;
      right: 30px;
      bottom: 20px;
      padding: 2px 5px;
      font-size: 12px;
      width: 80px;
      height: 46px;
      background: rgba(23, 24, 26, 0.5);
      border-radius: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
    }
    .videoObj {
      width: 100%;
      height: 100%;
    }
    .banner {
      width: 100%;
      height: 100%;
    }
  }
  .priceBox {
    background-color: #ffffff;
    padding: 40px 30px;
    .price {
      align-items: flex-end;
      p {
        font-size: 42px;
        font-weight: 500;
        color: #e00b12;
      }
      del {
        font-size: 28px;
        font-weight: 400;
        color: #cccccc;
        padding-bottom: 4px;
        padding-left: 22px;
      }
      span {
        font-size: 28px;
        font-weight: 500;
        color: #e00b12;
        padding-left: 22px;
        padding-bottom: 4px;
      }
    }
    .title {
      font-size: 36px;
      font-weight: 500;
      color: #333333;
      margin-top: 24px;
    }
  }
  .line {
    width: 100%;
    height: 20px;
    background-color: #f5f5f5;
  }
  .detailsTitle {
    height: 105px;
    font-size: 32px;
    font-weight: 500;
    color: #333333;
    padding: 30px 0 0 33px;
  }
  .con {
    padding: 0 30px;
    :deep(img) {
      max-width: 100%;
    }
  }
  .fanhuidingbu_btn {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 130px;
    right: 30px;
    z-index: 1;
  }
  .bottom {
    width: 100%;
    height: 110px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #dadee6;
    padding: 0 30px 0 46px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    .bottomLeft {
      width: 50%;
      .leftItem {
        flex-direction: column;
        margin-right: 69px;
        img {
          width: 48px;
          height: 48px;
        }
        p {
          font-size: 20px;
          font-weight: 400;
          color: #808080;
          margin-top: 4px;
        }
      }
    }
    .rightItem {
      .addCart {
        width: 200px;
        height: 80px;
        background: #ffffff;
        border-radius: 100px 0px 0px 100px;
        border: 1px solid #e00b12;
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
      }
      .buy {
        width: 200px;
        height: 80px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 0px 40px 40px 0px;
        font-size: 26px;
        font-weight: 400;
        color: #ffffff;
        border: 1px solid #e00b12;
      }
    }
  }
  .popupBox {
    padding: 30px;
    .popupTop {
      width: 100%;
      .popupTopImg {
        width: 180px;
        height: 180px;
        border-radius: 16px;
      }
      .popupRight {
        padding-left: 20px;
        p {
          font-size: 42px;
          font-weight: 500;
          color: #e00b12;
          margin-bottom: 10px;
        }
        span {
          font-size: 36px;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .skuBox {
      margin-top: 60px;
      .sku {
        margin-bottom: 69px;
        .skuTitle {
          font-size: 26px;
          font-weight: 400;
          color: #666666;
          margin-bottom: 14px;
        }
        .skuCon {
          flex-wrap: wrap;
          justify-content: flex-start;
          .skuItem {
            width: 144px;
            height: 56px;
            background: #f5f5f5;
            border-radius: 10px;
            font-size: 26px;
            font-weight: 400;
            color: #666666;
            border: none;
            margin: 20px 14px 0;
          }
          .skuActive {
            background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
            color: #ffffff;
          }
        }
      }
      .sku:nth-last-of-type(1) {
        margin-bottom: 0;
      }
    }
    .stepBox {
      margin-top: 60px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #616366;
      }
    }
    .popupBtnBox {
      margin-top: 80px;
      .popupAddCart {
        width: 330px;
        height: 80px;
        background: #ffffff;
        border-radius: 40px;
        border: 1px solid #e00b12;
        font-size: 32px;
        font-weight: 400;
        color: #e00b12;
      }
      .popupBuy {
        width: 330px;
        height: 80px;
        background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
        border-radius: 40px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        border: 1px solid #e00b12;
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .share {
      width: 640px;
      .shareMain {
        border-radius: 30px;
        .shareMainImg {
          width: 100%;
          height: 420px;
          border-radius: 30px 30px 0 0;
          display: block;
        }
        .bom {
          padding: 49px 39px;
          border-radius: 0 0 30px 30px;
          background-color: #ffffff;
          .bomLeft {
            width: 242px;
            height: 242px;
          }
          .bomRight {
            flex-direction: column;
            flex: 1;
            img {
              width: 130px;
              height: 130px;
              border-radius: 50%;
            }
            p {
              font-size: 32px;
              font-weight: 500;
              color: #333333;
              line-height: 45px;
              margin-top: 6px;
            }
            span {
              font-size: 24px;
              font-weight: 400;
              color: #999999;
              line-height: 33px;
              margin-top: 4px;
            }
          }
        }
      }
      .shareBtn {
        border: none;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 45px;
        width: 400px;
        height: 88px;
        background: linear-gradient(90deg, #f50811 0%, #b30b11 100%);
        border-radius: 44px;
        display: block;
        margin: 60px auto 0;
      }
    }
  }
}
</style>